<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Epreuve - Interface du concours des Open du Web</title>
    <link rel="stylesheet" type="text/css" href="epreuve1_fichiers/css_005.css" media="screen">
<link rel="stylesheet" type="text/css" href="epreuve1_fichiers/css.css" media="screen">
<link rel="stylesheet" type="text/css" href="epreuve1_fichiers/css_004.css" media="screen">
<link rel="stylesheet" type="text/css" href="epreuve1_fichiers/css_003.css" media="screen">
<link rel="stylesheet" type="text/css" href="epreuve1_fichiers/css_002.css" media="print">
    <meta name="description" content="Open du Web">
    	<link rel="shortcut icon" type="image/x-icon" href="http://concours.open-du-web.fr/images/favicon.png">
	    <script type="text/javascript">
    var baseUrl = 'http://concours.open-du-web.fr';
    var module = 'epreuves';
    var reqvars = 'epreuves/epreuve/25';
    var finChronoInterface = 'December 06, 2012 21:14:06';
    var finChronoInterfaceJury = 'December 06, 2012 22:14:06';
    </script>
    <script type="text/javascript" src="epreuve1_fichiers/js_002.php"></script>
<script type="text/javascript" src="epreuve1_fichiers/js_003.php"></script>
<script type="text/javascript" src="epreuve1_fichiers/js.php"></script>


    <script type="text/javascript" src="epreuve1_fichiers/jquery.js"></script>
    <link rel="shortcut icon" href="http://concours.open-du-web.fr/images/odw.ico">
    </head>
        <body id="body" class="">
    <div id="page">
    <div id="header">
        <h1>
            <a href="http://concours.open-du-web.fr/" class="header_left"><img src="epreuve1_fichiers/logo.png" alt="Interface du concours des Open du Web"></a>
            <a href="http://www.les-argonautes.fr/" class="header_right">Sponsor du concours : <img src="epreuve1_fichiers/logo_argonautes.png" alt="Les Argonautes"></a>
            <span class="header_center">Interface du concours des Open du Web</span>
        </h1>
    </div>

    <div id="container">
        <ul id="nav">
		<li><a href="http://concours.open-du-web.fr/epreuves">Tableau des épreuves</a></li>
		<li class="right">
	    Bienvenue BODART !
	    <a href="http://concours.open-du-web.fr/epreuves/epreuve/25?logout=1" class="btn">Déconnexion</a>
	</li>
	    </ul>

<script type="text/javascript">
    $(document).ready(function(){
        var start = 1354814403*1000 ;
    });
</script>

<div class="clear"></div>


<ul id="bandeau">
    <li>
        <p>
            Participant :
            <span>
                BODART                (EpiLiWeb)            </span>
        </p>
    </li>
    
    <li>
        <p>
            Épreuve en cours : 
                                <span>
                        Intégration n° 1                    </span>
                    </p>
    </li>
    
    <li>
        <p>
            Temps passé sur l'épreuve en cours : 
                                <span id="timer">00 : 28 : 34</span>
                    </p>
    </li>
    
    <li>
        <p>
            Temps restant :
            <span class="countdown">02 : 25 : 29</span>
        </p>
    </li>
</ul>

    <script type="text/javascript">
        var startTime = 0;
        var end = 0;
        var diff = 0;
        var reset = false;
        var timerID = 0;
        var start = 1354814403*1000 ;
        
        $(document).ready(function(){
            $("#stop").hide();
            chronoStart();

        });

        function chrono(){
            end = new Date();
            diff = end - start;
            diff = new Date(diff);
            var sec = diff.getSeconds();
            var min = diff.getMinutes();
            var hr = diff.getHours()-1;

            if (sec < 10){
                sec = "0" + sec;
            }
            
            if (min < 10){
                min = "0" + min;
            }
            
            if (hr < 10){
                hr = "0" + hr;
            }
            
            $("#timer").html(hr+" : "+min+" : "+sec);
        }

        function chronoStart(){
            $(".tog").toggle();
            //start = new Date(1354814403*1000 );
            timerID = setInterval(chrono, 500);
        }
    </script>

<div id="content">
    <h2>
        <span>
            Catégorie Intégration        </span>
        - Épreuve n° 1
            </h2>

    <div id="consignes">
        
        <h3>Consignes</h3>

        <div class="laConsigne">
                            <div class="sponsor_image">
                    <div class="wrap">
                        <p>Epreuve élaborée avec</p>
                        <img src="epreuve1_fichiers/lesargonoautes.png">
                    </div>
                </div>
                        <p>À partir de la maquette de zoning du blog des
 Argonautes (cf. ci-dessous), réalisez un document HTML ne contenant que
 du balisage HTML en utilisant au maximum les possibilités qui vous sont
 offertes par ce langage.</p>

<p>Le balisage HTML doit être optimisé pour le reférencement naturel.</p>

<p>(l’image suivante peut être utilisé pour les images des articles)</p>
<img src="epreuve1_fichiers/ref-tg5.gif" alt="image_reference">

<p>ATTENTION : il n’y a AUCUN CSS et AUCUN STYLE à faire à ce niveau !</p>

<p><a target="_blank" href="http://concours.open-du-web.fr/odw/inte-1/maquette-u9h.png">Maquette PNG</a></p>

<p>Note : le titre d’un article est à mettre en dessous de l’image de l’article.</p>        </div>


        <div class="left epreuveDetail">
            <h3 class="margintop">Critères de validation</h3>
            <ul>
                                <li>La page HTML contient bien tous les 
éléments demandés : formulaire de login, affichage des posts (au moins 
un) et affichage de la pagination.</li>
                                <li>Aucun élément style, que ce soit en ligne ou dans un fichier externe n’a été utilisé.</li>
                        </ul>

            <h3 class="margintop">Bonus de l'épreuve (+2W)</h3>

            <ul>
                                        <li>Le document doit être écrit en HTML 5.</li>
                                        <li>Remplacer l’usage des labels par des placeholder.</li>
                                        <li>Code validé par le <a href="http://validator.w3.org/">validateur W3C</a>.</li>
                                        <li>Code accessible (utilisation possible avec un navigateur texte).</li>
                                        <li>Mention spéciale du jury.</li>
                            </ul>

            <!--<h3 class="margintop">Mentions possibles dans cette catégorie (+1W)</h3>

            <ul>
                                    <li>Il n'y a pas de mentions pour cette catégorie.</li>
                            </ul>-->
        </div>
    </div>
    
        <div class="right epreuveDetail">
                <h3>Envoyer au jury</h3>
            <p class="title">Terminé ? Allez, on envoie au jury pour validation !</p>

            <form action="http://concours.open-du-web.fr/epreuves/epreuve/25" method="POST" id="sendReponse" enctype="multipart/form-data">
                            <input name="fileReponse" id="fileReponse" type="file">
                <span class="legend">(fichiers ZIP acceptés)</span>

                <p class="accepted marginbottom">
                    <a href="http://concours.open-du-web.fr/popin/formats-acceptes" class="popin">Voir les formats acceptés</a>
                </p>

                <label for="commentaires">
                    <strong>Précisions pour le jury (facultatif)</strong>
                </label>

                <p>
                    <textarea name="commentaires" id="commentaires"></textarea>
                </p>

                <p class="center">
                    <input value="Envoyer !" class="btn" name="submitEpreuve" type="submit">
                </p>

                <p class="center margintop">
                    <input value="abandonner l'épreuve" name="giveup" id="giveup" type="button">
                    <br>Attention, si tu abandonnes l'épreuve, le score pour cette épreuve sera de -1W.
                </p>
            </form>
        </div>
    
    <div class="clear"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('#sendReponse').submit(function(e, giveup){
        if( $('#fileReponse').val() == '' && giveup != 'giveup' ){
            if(!confirm( 'Es-tu sûr de ne pas vouloir envoyer un fichier ?' )){
                return false;
            }
        }
    });

    $('#giveup').click( function(){
        if( confirm( 'Es tu sûr de vouloir abandonner cette épreuve ?' )){
            $('#sendReponse').append('<input type="hidden" name="giveup" value="1" />').trigger('submit',['giveup']);
        }
    });
});
</script>


    </div>
</div>
<div id="footer">
    
</div>    <!--
    0,0285    -->
    
        
    
</body></html>